<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ page import="com.storyroad.responseClasses.Profile"%>
<%@ page import="com.storyroad.responseClasses.StoryView"%>

<%
	Profile profileObject = (Profile) request
			.getAttribute("profileObject");
%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="bootstrap/assets/ico/favicon.png">

<title>My Profile</title>

<!-- Bootstrap core CSS -->
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/profilepage.css" rel="stylesheet">

<script type="text/javascript">
function submitform()
	{
		var pass1 = document.getElementById("pass-1").value;
		var pass2 = document.getElementById("pass-2").value;
		if(pass1!=pass2){
			alert("The passwords do not match!");
		}
		else{
			document.changePass.submit();
		}
	}
	
function changePhoto(file) {
  var fd = new FormData();
  fd.append("image", file);
  fd.append("key", "6528448c258cff474ca9701c5bab6927");
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://api.imgur.com/2/upload.json", true);
  xhr.onload = function() {
    var link = JSON.parse(xhr.responseText).upload.links.original;        	 
    document.getElementById('photoLink').value = link;
    document.getElementById('profilePhoto').setAttribute("src", link);
    document.changePicture.submit();
  };
  xhr.send(fd);
}
</script>

</head>

<body background="img/back_nologo.png">
	<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<img src="img/logo_writing.png" id="top_logo">
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="MainPage">Home Page</a></li>
					<li><a href="GetRecommendations">Recommendations</a></li>
					<li><a href="Search.jsp">Search Stories</a></li>
					<li><a href="GetFollowers">Following</a></li>
				</ul>
				<ul class="nav navbar-nav" id="profile_buttons">
					<li class="active"><a href="GetProfile">My Profile</a></li>
					<li><a href="Logout">Logout</a></li>
				</ul>
			</div>
			<!-- /.nav-collapse -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.navbar -->

	<div class="container">
		<form name="changePicture" action="ChangePicture" method="POST">
			<input type="hidden" name="photo_link" id="photoLink">
			<input type="hidden" name="request_type" value="Web">
		</form>
		<div class="well sidebar-nav" id="profile-page-container">
			<%
				if (profileObject.getUserName().equals(
						request.getSession().getAttribute("username"))) {
			%>
			<h2>
				<center>My Profile</center>
			</h2>
			<%
				} else {
			%>
			<h2>
				<center>
					<%
						out.print(profileObject.getUserName());
					%>'s Profile
				</center>
			</h2>
			<%
				}
			%>
		</div>
		<div class="row">
			<div class="col-lg-6" id="sidebar">
				<div class="well sidebar-nav" id="profile-page-container">
					<div id="profile-img">
						<img src="<% out.print(profileObject.getPhotoLink()); %>" id="profilePhoto" alt="Profile Photo" height="100"
							width="100">
					</div>
					<div id="username">
						<b> <%
 	out.print(profileObject.getUserName());
 %>
						</b>
					</div>
					<center>
						<%
							if (!profileObject.getUserName().equals(
									request.getSession().getAttribute("username"))) {
						%>
						<%
							if (profileObject.isFollowing()) {
						%>
						<p>
							<a class="btn btn-lg btn-success"
								href="Unfollow?f_username=<%out.print(request.getParameter("targetname"));%>"
								role="button">Unfollow</a>
						</p>
						<%
							} else {
						%>
						<p>
							<a class="btn btn-lg btn-success"
								href="Follow?f_username=<%out.print(request.getParameter("targetname"));%>"
								role="button">Follow</a>
						</p>
						<%
							}
							}
						%>
					</center>
					<%
						if (profileObject.getUserName().equals(
								request.getSession().getAttribute("username"))) {
					%>
					<p align="right"><input type="file" onchange="changePhoto(this.files[0])" title="Change profile picture"></p>
					<%
						}
					%>
					<hr>
					<table class="table">
						<tbody>
							<tr>
								<td><b>Mail:</b></td>
								<td>
									<%
										out.print(profileObject.getEmail());
									%>
								</td>
							</tr>
							<%
								if (profileObject.getUserName().equals(
										request.getSession().getAttribute("username"))) {
							%>
							<tr>
								<td><b>Password:</b></td>
								<td>**********</td>
								<td><button class="btn btn-primary btn-lg" id="pass-button"
										data-toggle="modal" data-target="#myModal">Change
										Password</button></td>
							</tr>
							<%
								}
							%>
						</tbody>
					</table>
					<hr>
					<p style="font-size:large"><b>Followers: <%out.println(profileObject.getFollowerCount()); %></b></p>
					<%if(request.getAttribute("changePasswordSuccess")!=null){
						Boolean success = (Boolean)request.getAttribute("changePasswordSuccess");
						%>
						<%if(success){ %>
					<div class="alert alert-success" id="login-alert">
				      <center>
				      	<Strong>
				      	Success!
				      	</Strong>
				      	Password changed successfully.
				      	</center>
				      </div>
				      <%}else{ %>
				       <div class="alert alert-danger" id="login-alert">
				      <center>
				      <Strong>
				      	Old password does not match.
				      	</Strong>
				      	</center>
				      </div>
				<%}} %>
				</div>
			</div>
			 
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">Change Password</h4>
						</div>
						<div class="modal-body">
							<form name="changePass" class="form-signup" action="ChangePassword" method="POST">
									<input
									type="password" class="form-control" name="old_password" id="signup_field"
									placeholder="Old Password"> 
									<input type="password"
									class="form-control" name="new_password" id="pass-1"
									placeholder="New Password"> 
									<input type="password"
									class="form-control" name="new_password_again" id="pass-2"
									placeholder="New Password Again">
									<input type="hidden"
									name="request_type" value="Web">
							</form>
						</div>
						<div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					        <button type="button" class="btn btn-primary" onclick="javascript: submitform()">Change Password</button>
					      </div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->
			
			<div class="col-lg-6" id="sidebar">
				<div class="well sidebar-nav" id="profile-page-container-stories">
					<%
						if (profileObject.getUserName().equals(
								request.getSession().getAttribute("username"))) {
					%>
					<p id="mystories-header">My Stories</p>
					<%
						} else {
					%>
					<p id="mystories-header">
						<%
							out.print(profileObject.getUserName());
						%>'s Stories
					</p>
					<%
						}
					%>
					<ul class="nav" id="mystories-list">
						<%
							for (int i = 0; i < profileObject.getStories().size(); i++) {
								StoryView sView = profileObject.getStories().get(i);
						%>
						<li id="story-header" class="active"><a
							href="ReadStory?story_id=<%out.print(String.valueOf(sView.getS_id()).trim());%>&request_type=Web">
								<%
									out.print(sView.getTitle());
								%>
						</a>
							<p id="tag">
								Ragting:
								<%
								out.print(sView.getAvgRating());
							%>
								<%
									if (profileObject.getUserName().equals(
												request.getSession().getAttribute("username"))) {
								%>
								<button type="button" class="btn btn-primary btn-xs"
									id="edit-delete-buttons"
									onclick="window.location='ReadStory?story_id=<%out.print(String.valueOf(sView.getS_id()).trim());%>&request_type=Web&edit=1'">Edit</button>
								<%
									}
								%>
							</p>
							<p id="tag">
								<%
									if (sView.getTags().length() > 0) {
											out.print(sView.getTags());
										} else {
											out.print("Placeholer");
										}
								%>
								<%
									if (profileObject.getUserName().equals(
												request.getSession().getAttribute("username"))) {
								%>
								<button type="button" class="btn btn-danger btn-xs"
									id="edit-delete-buttons"
									onclick="window.location='DeleteStory?story_id=<%out.print(sView.getS_id());%>'">Delete</button>
								<%
									}
								%>
							</p></li>
						<%
							}
						%>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="bootstrap/assets/js/jquery.js"></script>
	<script src="bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="js/bootstrap.file-input.js"></script>
    <script>$(document).ready(function(){$('input[type=file]').bootstrapFileInput();});</script>
</body>
</html>